<!DOCTYPE html>
<html lang="en">
<head>
    <title>mapbox</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="lib/mapbox-gl.css" type="text/css">
    <link rel="stylesheet" href="style/map.css" type="text/css">
    <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.0/mapbox-gl-draw.css' type='text/css' />
    <script src="lib/mapbox-gl.js"></script>
    <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v1.2.0/mapbox-gl-draw.js'></script>
    <script src="https://unpkg.com/mapbox-gl-draw-snap-mode"></script>
</head>
<body>
<div id="map" class="map">
</div>
<script>
    var style = {
        "version": 8,
        "name": "Mapbox Streets",
        "sources": {
            'amap-tile': {
                type: 'raster',
                "scheme": "xyz",
                "tileSize": 256,
                tiles: [
                    'http://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
                    'http://webrd02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
                    'http://webrd03.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
                    'http://webrd04.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8',
                ]
            }
        },
        "layers": [
            {
                "id": "amap-tile",
                "type": "raster",
                "source": "amap-tile",
                "minzoom": 0,
                "maxzoom": 17,
                "layout": {
                    "visibility": "visible"
                }
            }
        ]
    }
    var map = new mapboxgl.Map({
        container: 'map', // container ID
        style: style,
        center: [107.11040599933166, 34.26271532332011], // starting position [lng, lat]
        zoom: 4
    });
    var Draw = new MapboxDraw({
        snap: true,
        snapOptions: {
            snapPx: 15, // defaults to 15
            snapToMidPoints: true, // defaults to false
            snapVertexPriorityDistance: 0.0025, // defaults to 1.25
        },
        guides: true,
    });
    map.addControl(Draw, 'top-left');
</script>
</body>
</html>